<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!--    <script type="text/javascript"  src="jquery.media.js"></script>-->
    <!--    <script type="text/javascript"  src="pdf.js"></script>-->
    <!--    <script type="text/javascript"  src="pdf.worker.js"></script>-->
    <script type="text/javascript"
            src="https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js"></script>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>

    <script src="fabric.min.js" type="text/javascript"></script>
</head>
<body>
<div id="demo">

    <!--    <img :src="imgUrl" alt="" width="100%" height="auto">-->
    <!--    <canvas id="the-canvas" style="display: none"></canvas>-->

    <!--   <object data="https://yun.xssbdc.com/api/image/pdf/d9546e41befb4f1fbb914364d88c2fb7.pdf" type="appli"></object>-->
    <!--<a class="media" href="https://yun.xssbdc.com/api/image/pdf/d9546e41befb4f1fbb914364d88c2fb7.pdf"></a>-->
    <!--    <object>-->
    <!--        <embed class="media" src="https://yun.xssbdc.com/api/image/pdf/d9546e41befb4f1fbb914364d88c2fb7.pdf" width="800" height="800" />-->
    <!--    </object>-->
    <div class="content">
        <canvas id="canvas" width="300" height="300"></canvas>
    </div>

</div>

</body>
<style>

    .content {
        width: 500px;
        height: 1000px;
        background-color: #eab1b1;
    }
    /*.media iframe{*/
    /*    width: 100vw;*/
    /*    height: calc(100vh - 100px);*/
    /*}*/
</style>
<script>
    let el=document.getElementsByClassName('content')[0];
    console.log(el.clientWidth,el.clientHeight)
    document.getElementById('canvas').width=el.clientWidth;
    document.getElementById('canvas').height=el.clientHeight;
    var canvas = new fabric.Canvas('canvas');

    var rect = new fabric.Rect({
        top : 100,
        left : 100,
        width : 100,
        height : 200,
        borderColor:'red',
        borderDashArray:[10,10],
        fill:'rgba(0,0,0,.5)',
        borderScaleFactor:'2',
        cornerStyle:'circle',
        transparentCorners:false,
        hasBorders:true,
        cornerColor:'red'

    });
    console.log(canvas)
    canvas.add(rect);
    // new VConsole();
    // let a = getMetaInfo();
    // console.log(a);
    // var data={
    //     contractNumber:'123',
    //     metaInfo:'122333',
    //     id:1
    // }
    // $.ajax({
    //     url: "http://192.168.0.154:8538/signApp/customer/initFaceVerify",
    //     contentType: 'application/json',
    //     data:JSON.stringify(data),
    //     type: 'POST',
    //     // beforeSend: function (request) {
    //     //     request.setRequestHeader('SIGN_MARK',token)
    //     // }
    // });


    // $('.media').media()


</script>
<!--<script src="https://cdn.weifenghr.com/static/pc/sbjsq/js/counter_jsq.js" defer></script>-->
<!--<script src="a.js" defer></script>-->
<!--<script src="b.js" defer></script>-->

</html>